{% extends 'layout/main.html' %}
{% from 'bootstrap/pagination.html' import render_pagination %}
{% block content_header %}
    <h1>
      {{ bar(request.args.get('cid')).title }}
    </h1>
    <ol class="breadcrumb">
    <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
    <li><a href="#">文章管理</a></li>
    <li class="active">{{ bar(request.args.get('cid')).title }}</li>
    </ol>
{% endblock %}


{% block content %}
    <div class="box">
        <div class="box-header with-border">
            <a class="btn btn-success" href="{{ url_for('article.create', cid=request.args.get('cid')) }}">添加文章</a>
        </div>
        <!-- /.box-header -->
        <div class="box-body">
            <table class="table table-bordered table-striped">
              <thead>
                <tr>
                  <th style="width: 10px"><input type="checkbox" value="" id="check_box"></th>
                  <th style="width: 10px">ID</th>
                  <th>标题</th>
                  <th width="200">作者</th>
                  <th width="150">创建时间</th>
                  <th width="150">更新时间</th>
                  <th style="width: 40px">操作</th>
                </tr>
              </thead>
              <tbody>
                {% if model %}
                {% for item in model %}
                <tr>
                  <td><input class="ids" type="checkbox" value="{{item.id}}" name="ids[]"></td>
                  <td>{{ item.id }}</td>
                  <td>{{ item.title }}</td>
                  <td>{{ item.author }}</td>
                  <td>{{ moment(item.created_at).format('Y-MM-DD hh:mm:ss') }}</td>
                  <td>{{ moment(item.updated_at).format('Y-MM-DD hh:mm:ss') }}</td>
                  <td style="width:100px">
                    <a href=""><span class="glyphicon glyphicon-eye-open"></span></a>
                    <a href="{{ url_for('article.update', id=item.id) }}"><span class="glyphicon glyphicon-pencil"></span></a>
                    <form class="inline" method="post" action="{{ url_for('.delete', id=item.id, next=request.full_path) }}">
                      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
                      <button type="submit" class="btn btn-link" style="display:contents;" onclick="return confirm('确定删除吗?');"><span class="glyphicon glyphicon-trash"></span></button>
                    </form>
                  </td>
                </tr>
                {% endfor %}
                {% endif %}
              </tbody>
            </table>
        </div>
        <!-- /.box-body -->
        <div class="box-footer clearfix">
          <div class="btn-group">
            <button type="button" id="choose" class="btn btn-default">全选/取消</button>
            <button type="button" id="delete" class="btn btn-default">删除</button>
            <button type="button" class="btn btn-default">移动</button>
          </div>
          <div class="pagination pagination-sm no-margin pull-right">
            {{ render_pagination(pagination) }}
          </div>
        </div>
    </div>
{% endblock %}

{% block scripts %}
{{ super() }}

<script>
  $(function () {
    $('#check_box').click(function () {
      $("input[name='ids[]']").prop('checked', this.checked)
    })

    $('#choose').click(function () {
      let check_box = $('#check_box')
      check_box.prop('checked', !check_box.is(':checked'))
      $("input[name='ids[]']").prop('checked', check_box.is(':checked'))
    })

    $("#delete").click(function () {
      let chk_value = [];
      $("input[name='ids[]']:checked").each(function () {
        chk_value.push($(this).val())
      })
      if (chk_value.length === 0) {
        alert('你没有选择任务文章')
        return false
      }
      if (confirm('确认删除吗？')) {
        $.post({
          url: "{{ url_for('.ajax_delete') }}",
          data: { 'csrf_token': '{{ csrf_token() }}', 'ids': JSON.stringify(chk_value) },
          success: function (result) {
            console.log(result)
            if (result.success) {
              window.location.reload()
            }
          }
        })
      }
    })
  })
</script>
{% endblock scripts %}